<template>
  <basic-dialog :visible="show"
                title="设置点位"
                :isShowInnerLoading="isShowInnerLoading"
                min-width="730px"
                isShowClose
                isShowBasicFooter
                @submit="submit"
                @close="show = false"
  >
    <div class="flex full-width">
      <div style="width: 500px">
        <q-table color="primary"
                 style="margin: 20px 20px 0;max-height: 340px;"
                 :data="tableData"
                 :columns="columns"
                 row-key="repName"
                 class="myTable scroll inherit"
                 :pagination.sync="pagination"
                 :hide-bottom="!!tableData.length"
                 no-data-label="暂无数据"
                 selection="multiple"
                 :selected.sync="selList"
                 ref="table">
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                class="bor-b"
              >
                <q-checkbox v-model="props.selected" :disable="otherSelNum === tableData.length" indeterminate-value="some" @input="selAll" />
                {{col.label}}
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td :props="props" class="bor-b font-size-14" key="repName">
                <q-checkbox v-model="props.selected" :disable="props.row.isOtherSel" />
                {{ props.row.repName}}
              </q-td>
            </q-tr>
          </template>
        </q-table>
        <yz-pagination v-model="pagination" @onSearch="getList"/>
      </div>
      <div style="width: 220px;padding-top: 20px;padding-right: 20px">
        <div class="full-height full-width flex column">
          <div class="header text-weight-bold">已选点位</div>
          <div class="scrollbar scroll flex-1 list-bor " style="padding: 0 10px;max-height: 362px">
            <template v-for="(item, index) in selList">
              <div :key="index" class="flex items-center" style="width: 179px">
                <div class="cell repName ellipsis " style="line-height: 2">{{item.repName}}<q-tooltip>{{item.repName}}</q-tooltip></div>
              </div>
              <div class="bor" :key="`bor_${index}`" v-show="selList.length - 1 > index"/>
            </template>
          </div>
        </div>
      </div>
    </div>
  </basic-dialog>
</template>

<script>
import { getPoints } from 'src/boot/status-monitor/machine'
import _ from 'lodash'
export default {
  name: 'set-point-group',
  data () {
    return {
      selList: [],
      tableData: [],
      // 表格分页配置
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      otherSelList: [], // 其它分组所选点位
      otherSelNum: 0, // 当前页其它分组所选点位数量
      show: false,
      isShowInnerLoading: false,
      selected: [],
      id: null,
      columns: [
        { name: 'repName', label: '数据点', field: 'repName', align: 'left' }
      ]
    }
  },
  methods: {
    showDialog (id, classification, selClass) {
      this.show = true
      this.isShowInnerLoading = true
      this.id = id
      this.pagination = {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      }
      let selList = []
      let otherSelList = []
      Object.keys(classification).forEach(item => {
        // 所选分类下点位
        if (item === selClass) {
          classification[item] && (selList = classification[item].map(item => {
            return {
              isSelected: true,
              repName: item
            }
          }))
        } else {
          classification[item] && otherSelList.push(...classification[item])
        }
      })
      this.selList = selList
      this.otherSelList = otherSelList
      this.getList()
    },
    getList () {
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        deviceId: this.id
      }
      getPoints(params).then(res => {
        res.data.list.forEach(item => {
          item.isOtherSel = _.indexOf(this.otherSelList, item.repName) !== -1
        })
        this.otherSelNum = _.cloneDeep(res.data.list).filter(i => i.isOtherSel).length
        this.tableData = res.data.list
        this.pagination.rowsNumber = res.data.total
      }).finally(() => {
        this.isShowInnerLoading = false
      })
    },
    // 全选
    selAll () {
      let selList = []
      console.log(this.selList)
      this.selList.forEach(item => {
        if (!item.isOtherSel) {
          selList.push(item)
        }
      })
      this.selList = selList
    },
    submit () {
      console.log(this.selList)
      this.$emit('setPoint', _.map(this.selList, 'repName'))
      this.show = false
    }
  }
}
</script>

<style scoped lang="stylus">
.header{
  background-color $primary
  padding 0 20px
  color #FFFFFF
  border-radius: 6px 6px 0px 0px;
  line-height 40px
  height 40px
}
.list-bor{
  border: 1px solid #F3F3F3;
  border-top 0
  border-radius: 0px 0px 6px 6px;
  .bor{
    height 1px
    background-color #D3D3D3
    //margin 0 10px
  }
}
</style>
